<template>
  <div @click="chartClickHandler" @contextmenu.prevent="contextmenuHandler">
    <ve-chart :data="chartData" :settings="chartSettings" :events="chartEvents" height="500px"
              :after-config="afterConfig">
      <div v-show="chartData.rows.length <= 0" class="data-empty">没有数据</div>
    </ve-chart>
  </div>
</template>

<script>
import $api from "@/api/api-charts";
import DateTime from "@/utils/DateTime";

export default {
  name: "DrillTenantOrder",
  data: function () {
    const self = this;
    const chartEvents = {
      click(e) {
        self.chartItemClickHandler(e);
      }
    };
    return {
      chartData: {
        columns: ['院线', '交易金额'],
        rows: []
      },
      loading: false,
      chartType: {
        bar: 'bar',
        line: 'line',
        pie: 'pie',
        histogram: 'histogram'
      },
      chartSettings: {
        type: 'bar'
      },
      chartEvents,
      params: {
        tenantName: undefined,
        cinemaName: undefined,
        channelTypeName: undefined,
        channelName: undefined,
        goodsTypeName: undefined,
        filmName: undefined,
        sessionYear: undefined,
        sessionMonth: undefined,
        sessionDay: undefined,
        sessionHour: undefined,
        orderYear: undefined,
        orderMonth: undefined,
        orderDay: undefined,
        orderHour: undefined,
        datetimeStart: DateTime.of().toDateTimeStart(),
        datetimeEnd: DateTime.of().toDateTimeEnd()
      },
      chartFlag: {
        tenant: 'tenant',
        cinema: 'cinema',
        channelType: 'channelType',
        channelName: 'channelName',
        time: 'time'
      },
      currentFlag: 'tenant'
    }
  },
  created() {
    this.searchChartsTenantOrder();
  },
  methods: {
    contextmenuHandler(e){
      console.log('contextmenuHandler', e);
    },
    chartClickHandler(e) {
      console.log('chartClickHandler', e);
    },
    chartItemClickHandler(e) {
      console.log('chartItemClickHandler', e);
      switch (this.currentFlag) {
        case "tenant":
          if (e && e.event && e.event.event && e.event.event.ctrlKey) {
            return;
          }
          this.params.tenantName = e.name;
          this.searchChartsCinemaOrder();
          break;
        case "cinema":
          if (e && e.event && e.event.event && e.event.event.ctrlKey) {
            this.currentFlag = this.chartFlag.tenant;
            this.params.tenantName = undefined;
            this.params.cinemaName = undefined;
            this.searchChartsTenantOrder();
          } else {
            this.params.cinemaName = e.name;
            this.searchChartsChannelTypeOrder();
          }
          break;
        case "channelType":
          if (e && e.event && e.event.event && e.event.event.ctrlKey) {
            this.currentFlag = this.chartFlag.cinema;
            this.params.cinemaName = undefined;
            this.params.channelTypeName = undefined;
            this.searchChartsCinemaOrder();
          } else {
            this.params.channelTypeName = e.name;
            if(this.params.channelTypeName === '本地'){
              this.searchChartsTimeOrder();
            }else{
              this.searchChartsChannelOrder();
            }
          }
          break;
        case "channelName":
          if (e && e.event && e.event.event && e.event.event.ctrlKey) {
            this.currentFlag = this.chartFlag.channelType;
            this.params.channelTypeName = undefined;
            this.params.channelName = undefined;
            this.searchChartsChannelTypeOrder();
          } else {
            this.params.channelName = e.name;
            this.searchChartsTimeOrder();
          }
          break;
        case "time":
          if (e && e.event && e.event.event && e.event.event.ctrlKey) {
            if(this.params.channelTypeName === '本地'){
              this.currentFlag = this.chartFlag.channelType;
              this.params.channelTypeName = undefined;
              this.params.channelName = undefined;
              this.searchChartsChannelTypeOrder();
            }else{
              this.currentFlag = this.chartFlag.channelName;
              this.params.channelName = undefined;
              this.searchChartsChannelOrder();
            }
          }
          break;
        default:
      }
    },
    afterConfig(options) {
      if (options && options.xAxis && options.xAxis[0]) {
        options.xAxis[0].axisLabel = {
          interval: 0,
          rotate: 60
        };
      }
      return options;
    },
    searchChartsTenantOrder() {
      this.loading = true;
      $api.chartsTenantOrder(this.params).then(data => {
        this.loading = false;
        if (data && data.rows && data.rows.length <= 0) {
          return;
        }
        this.chartSettings = {
          type: this.chartType.bar,
          label: {
            show: true,
            position: "right",
            formatter(item) {
              return (Number(item.value) / 1000).toFixed(2) + ' 千元';
            }
          }
        };
        this.currentFlag = this.chartFlag.tenant;
        this.chartData = data;
      });
    },
    searchChartsCinemaOrder() {
      this.loading = true;
      $api.chartsCinemaOrder(this.params).then(data => {
        this.loading = false;
        if (data && data.rows && data.rows.length <= 0) {
          return;
        }
        this.chartSettings = {
          type: this.chartType.histogram,
          label: {
            show: true,
            position: "top",
            formatter(item) {
              return Number(item.value).toFixed(2) + ' 元';
            }
          }
        };
        this.currentFlag = this.chartFlag.cinema;
        this.chartData = data;
      });
    },
    searchChartsChannelTypeOrder() {
      this.loading = true;
      $api.chartsChannelTypeOrder(this.params).then(data => {
        this.loading = false;
        if (data && data.rows && data.rows.length <= 0) {
          return;
        }
        this.chartSettings = {
          type: this.chartType.pie,
          label: {
            show: true,
            normal: {
              fontSize: 16,
              formatter(item) {
                return item.name + '\n\r'
                  + Number(item.value).toFixed(2) + ' 元\n\r'
                  + Number(item.percent).toFixed(2) + ' %';
              }
            }
          }
        };
        this.currentFlag = this.chartFlag.channelType;
        this.chartData = data;
      });
    },
    searchChartsChannelOrder() {
      this.loading = true;
      $api.chartsChannelOrder(this.params).then(data => {
        this.loading = false;
        if (data && data.rows && data.rows.length <= 0) {
          return;
        }
        this.chartSettings = {
          type: this.chartType.pie,
          label: {
            show: true,
            normal: {
              fontSize: 16,
              formatter: '{b}\n\r{c}元\n\r{d}%'
            }
          }
        };
        this.currentFlag = this.chartFlag.channelName;
        this.chartData = data;
      });
    },
    searchChartsTimeOrder() {
      this.loading = true;
      $api.chartsTimeOrder(this.params).then(data => {
        this.loading = false;
        if (data && data.rows && data.rows.length <= 0) {
          return;
        }
        this.chartSettings = {
          type: this.chartType.line,
          label: {
            show: true,
            position: "top",
            formatter(item) {
              return Number(item.data[1]).toFixed(2) + ' 元';
            }
          }
        };
        this.currentFlag = this.chartFlag.time;
        this.chartData = data;
      });
    }
  }
}
</script>

<style scoped>
.data-empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, .7);
  color: #888;
  font-size: 14px;
}
</style>
